let map; // 地图实例
let polyline; // 轨迹折线
let labels = []; // 存放标注

// 初始化百度地图
function initMap() {
    map = new BMapGL.Map("map"); // 创建地图实例
    map.centerAndZoom(new BMapGL.Point(139.753457,35.684258), 14); // 设置默认中心点
    map.enableScrollWheelZoom(true); // 启用滚轮缩放
          //添加比例尺控件
      var scaleControl = new BMapGL.ScaleControl();
      map.addControl(scaleControl);
      // 添加缩放按钮
      var zoomControl = new BMapGL.ZoomControl({
        anchor: BMAP_ANCHOR_TOP_LEFT,//位置
        offset: new BMapGL.Size(150, 100),//偏移量
      });
      map.addControl(zoomControl);
     
      
}

// 清除现有的轨迹和标注
function clearMap() {
    if (polyline) {
        map.removeOverlay(polyline);
    }
    labels.forEach(label => map.removeOverlay(label));
    labels = [];
}

// 获取并展示轨迹
function fetchTrajectory() {
    const deviceId = document.getElementById('deviceId').value; // 获取用户输入的设备ID

    if (!deviceId) {
        alert('未查询到设备，请输入有效的ID号');
        return;
    }
    // 发送请求到后端获取轨迹数据
    fetch(`/getTrajectory?id=${deviceId}`)
        .then(response => response.json()) // 将响应转为JSON
        .then(data => {
            if (data.length === 0) {
                alert('未查询到设备轨迹');
                return;
            }
            // 清除之前的轨迹和标注
            clearMap();

            // 将数据转换为地图点数组
            const points = data.map(point => new BMapGL.Point(point.longitude, point.latitude));

            // 创建轨迹折线
            polyline = new BMapGL.Polyline(points, {
                strokeColor: "red", // 线条颜色
                strokeWeight: 4, // 线条宽度
                strokeOpacity: 0.7 // 线条透明度
            });

            // 在地图上添加轨迹折线
            map.addOverlay(polyline);

            // 为每个点添加数字标记
            points.forEach((point, index) => {
                addLabel(point, index + 1); // index + 1 显示数字
            });

            // 如果有轨迹点，则将地图中心移动到第一个点
            if (points.length > 0) {
                map.panTo(points[0]);
            }
        })
        .catch(error => {
            console.error('获取轨迹数据出错:', error);
        });
}

// 添加数字标记
function addLabel(point, number) {
    const label = new BMapGL.Label(number.toString(), {
        position: point, // 设置标注位置
        offset: new BMapGL.Size(-8, 8) // 调整标注偏移量
    });

    label.setStyle({
        color: "black",
        fontSize: "17px",
        border: "1px solid #222222",
        padding: "3px",
        backgroundColor: "#00FFFF",
        borderRadius: "5px"
    });

    labels.push(label);
    map.addOverlay(label);
}

// 当页面加载时初始化地图
window.onload = initMap;

